<template>
	<view class="card">
		<view class="bottom flex bt" :class="isWrap? 'wrap' : ''">
			<view class="box relative" v-for="(item , index) in dataList" :key="item" @click="onclickHandler(item,index)">
				<view class="absolute counts" v-if="item.count">
					浏览量:{{item.count>1000?'999+':item.count}}
				</view>
				<image :src="item.img" mode="" class="img"></image>
				<block v-if="item.emergent">
					<image src="../../static/icon/jiaji.png" mode="" class="jiaji absolute"
						v-if="item.emergent == 0 ? false : true">
					</image>
				</block>
				<block v-if="item.hot">
					<image src="../../static/icon/hot.png" mode="" class="jiaji absolute" v-if="item.hot"></image>
				</block>
				<block v-if="item.count>1000? true: false">
					<image src="../../static/icon/Popular.png" mode="" class="jiaji absolute"></image>
				</block>
				<view class="small absolute">
					<view class="name" v-if="item.name">
						宠物名称 {{item.name}}
					</view>
					<view class="name" v-if="item.race">
						宠物品种 {{item.race}}
					</view>
					<block v-if="isSale">
						<view class="name" v-if="item.money">
							宠物价格 <text style="color:#f0ad4e;"> {{item.money}}</text>
						</view>
					</block>
					<block v-if="item.address">
						<view class="name" v-if="!isSale" style="width:94%;overflow: hidden;	white-space: nowrap;font-size: 26rpx;">
							走失地点： <text style="color:#000;"> {{item.address}}</text>
						</view>
						<view class="name" v-else style="width:90%;overflow: hidden;	white-space: nowrap;">
							出售/领养地点 <view style="color:#f0ad4e;"> {{item.address}}</view>
						</view>
					</block>
					<view class="date" v-if="isDate">
						走失时间 {{item.date}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "carditem",
		data() {
			return {

			};
		},
		props: [
			'dataList',
			'isDate',
			'isWrap',
			'emergent',
			'hot',
			'isSale'
		],
		mounted() {},
		methods: {
			onclickHandler(item, index) {
				// console.log(item,index)
				this.$emit('onclickHandler', item, index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		.bottom {
			min-height: 400rpx;
			padding: 20rpx $uni-spacing-row-sm;

			.box {
				width: 330rpx;
				min-height: 470rpx;
				max-height: 520rpx;
				border: 4rpx solid $uni-color-primary-bg;
				border-radius: 14rpx;
				margin: $uni-spacing-row-sm 0;

				.img {
					width: 100%;
				}

				.jiaji {
					width: 120upx;
					height: 120upx;
					top: 0;
					right: 5%;
					z-index: 3;
				}

				.small {
					padding-top: $uni-spacing-col-sm ;
					bottom: 0;
					width: 100%;
					min-height: 120rpx;
					background-color: $uni-color-primary;
					word-wrap: break-word;
					text-align: left;
					text-indent: 12rpx;
					color: #fff;
					line-height: $line-height-lg;

					.name {}

					.date {
						font-size: $uni-font-size-sm;
					}
				}
			}
		}

		.counts {
			bottom: 155rpx;
			left: 10rpx;
			color: #ffffff;
			font-size: 24rpx;
			background-color: #7d7d7d;
			padding: 12rpx;
			border-radius: 8rpx;
			opacity: .8;
		}
	}
</style>